<html>

<head>

    <title>HTML 文档结构 </title>
   
</head>

<body>
    <!-- <center>
            <font color=”red ”>Welcome to Web Site</font>
        </center> 
        -->

    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <input type="button" name="bt" id="button2" value="确认2" />
        </div>
        <div id="todogroup" onclik="handleClick()">
         <div>打游戏</div>
         <div>睡觉</div>
        </div>

        <span style="color: rgb(235, 255, 11);">asd&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;asd</span>

    </div>
</body>
<script lang="javascript">
    var intCnt=0;
    function init() {
        // setTimeout(function(){
        //     alter("hhh");
        // },2000)
        console.log("xxx");
        document.getElementById("button2").onclick = handleClick;
        console.log('xxxxxx');
    }
    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }
    console.log('xxxx');
    function handleClick(e) {
        console.log('handleClike');
        console.log(e);
        // var temp=document.getElementsByName("bt");
        // document.getElementsByClassName("main")[0].style="background-color:#333333";
        // document.getElementById("todogroup").innerHTML += "<div>" + getValue() + "</div>";

        document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
            + intCnt + "'><input type='checkbox' name='todocheck' ><div class='item-value'>"
            + getValue() + "</div><button class='item-del' type='button' onclick='deletByIndex(" 
            + intCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;

    }
    function deletByIndex(index) {
        document.getElementById("todo"+index).remove();
    }
    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 110vh;
    }
    .main {
        background-color: rgb(84, 176, 176);
        height: 200px;
        padding: 8px;
        border: 1px solid #333333;
        border-radius: 8px;
    }

    .row {
        display: flex;
    }
    .item{
        display:flex;
        align-items: center;
        margin: 6px;
        padding:3px;
    }
    .item-value{
        flex-grow:1;
        color:#3a3a3a;

    }
    .item-del{
        color:aliceblue;
        background-color: red;
        border:0px;
    }
</style>

</html>